<template>
  <ul>
    <li
      class="li animatd "
      :class="{bounceOutRight:!item.show}"
      v-for="(item,index) in data"
      :key="index"
      @click="del(index)"
    >
      {{item}}
    </li>
  </ul>
</template>

<script>
export default {

  methods: {
    del (idx) {
      this.data[idx].show = !this.data[idx].show
      setTimeout(() => {
        // this.data.splice(idx, 1)
      }, 800)
    },
    leave () {
      alert(11)
    }
  },
  data () {
    return {

      data: [{
        data: 50,
        type: '3',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }, {
        data: 50,
        type: '1',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }, {
        data: 50,
        type: '1',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }, {
        data: 50,
        type: '1',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }, {
        data: 50,
        type: '1',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }, {
        data: 50,
        type: '1',
        show: true
      }, {
        data: 50,
        type: '2',
        show: true
      }]
    }
  }
}
</script>

<style>
.li {
  width: 300px;
  height: 30px;
  border-bottom: 1px solid;
  line-height: 30px;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.animatd {
  animation-duration: 1s !important;
}
</style>
